<template>
<onekit-page>
<onekit-view onekit-class="index">
	<onekit-view onekit-class="index-hd">
		<onekit-image onekit-class="index-logo" src="resources/kind/logo.png"></onekit-image>
		<onekit-view onekit-class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见<onekit-navigator onekit-class="weui-agree__link" url="pages/doc-web-view/doc-web-view">小程序开发文档</onekit-navigator>。</onekit-view>
	</onekit-view>
	<onekit-view onekit-class="index-bd">
		<onekit-view onekit-class="kind-list">
			<template v-for="item in list">
				<onekit-view :key="item.id" onekit-class="kind-list-item">
					<onekit-view :onekit-class="`kind-list-item-hd ${item.open?'kind-list-item-hd-show':''}`" :id="item.id" @click.native="kindToggle">
						<onekit-view onekit-class="kind-list-text">{{item.name}}</onekit-view>
						<onekit-image v-if="theme == 'dark'" onekit-class="kind-list-img" :src="'resources/kind/'+item.id+'_dark.png'"></onekit-image>
						<onekit-image v-else onekit-class="kind-list-img" :src="'resources/kind/'+item.id+'.png'"></onekit-image>
					</onekit-view>
					<onekit-view :onekit-class="`kind-list-item-bd ${item.open?'kind-list-item-bd-show':''}`">
						<onekit-view :onekit-class="`navigator-box ${item.open?'navigator-box-show':''}`">
							<template v-for="page in item.pages">
								<onekit-navigator :key="page.item" onekit-class="navigator" :url="'pages/'+page+'/'+page">
									<onekit-view onekit-class="navigator-text">{{page}}</onekit-view>
									<onekit-view onekit-class="navigator-arrow"></onekit-view>
								</onekit-navigator>
							</template>
						</onekit-view>
					</onekit-view>
				</onekit-view>
			</template>
		</onekit-view>
	</onekit-view>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
const ONEKIT_JSON= {
  "navigationBarTitleText": "小程序官方组件展示2",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../weixin2vue/wx.js';
import Macro from '../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../weixin2vue/OnekitPage.js';
import Component from '../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["list"],ONEKIT_SJS,{
    "onShow"(){
      wx.reportAnalytics('enter_home_programmatically',{
});
    },
    "onShareAppMessage"(){
      return {
        "title":'小程序官方组件展示',
        "path":'page/component/index'
};
    },
    "data":{
        "list":[
          {
              "id":'view',
              "name":'视图容器',
              "open":false,
              "pages":[
                'view',
                'scroll-view',
                'swiper',
                'movable-view',
                'cover-view'
              ]
},
          {
              "id":'content',
              "name":'基础内容',
              "open":false,
              "pages":[
                'text',
                'icon',
                'progress',
                'rich-text'
              ]
},
          {
              "id":'form',
              "name":'表单组件',
              "open":false,
              "pages":[
                'button',
                'checkbox',
                'form',
                'input',
                'label',
                'picker',
                'picker-view',
                'radio',
                'slider',
                'switch',
                'textarea',
                'editor'
              ]
},
          {
              "id":'nav',
              "name":'导航',
              "open":false,
              "pages":[
                'navigator'
              ]
},
          {
              "id":'media',
              "name":'媒体组件',
              "open":false,
              "pages":[
                'image',
                'video',
                'camera',
                'live-pusher',
                'live-player'
              ]
},
          {
              "id":'map',
              "name":'地图',
              "open":false,
              "pages":[
                'map'
              ]
},
          {
              "id":'canvas',
              "name":'画布',
              "open":false,
              "pages":[
                'canvas',
                'canvas-2d',
                'webgl'
              ]
},
          {
              "id":'open',
              "name":'开放能力',
              "open":false,
              "pages":[
                'ad',
                'open-data',
                'web-view'
              ]
},
          {
              "id":'obstacle-free',
              "name":'无障碍访问',
              "open":false,
              "pages":[
                'aria-component'
              ]
}
        ],
        "theme":'light'
},
    "onLoad"(){
      this.setData({
        "theme":(wx.getSystemInfoSync().theme) || ('light')
});
      if(wx.onThemeChange)
      {
        wx.onThemeChange(({theme})=>{this.setData({
            theme
})});
      };
    },
    "kindToggle"(e){
      const id = e.currentTarget.id;
      const list = this.data.list;
      for(let i = 0,len = list.length;i < len;++i){
      if(list[i].id == id)
        {
          list[i].open = !list[i].open;
        }
else
        {
          list[i].open = false;
        }
    };
      this.setData({
        list
});
      wx.reportAnalytics('click_view_programmatically',{
});
    }
});

</script>
<style 
 lang="css">
@import '/page/common/index.css';
.weui-agree__link {
  display: inline ;
  color: var(--weui-LINK) ;
}
</style>